---
id: custom-backdrop
title: Custom Backdrop
description: Bottom Sheet custom backdrop.
image: /img/bottom-sheet-preview.gif
slug: /custom-backdrop
hide_table_of_contents: true
---

To add a backdrop to your sheet you will need to pass the prop `backdropComponent` to the `BottomSheet` component.

When you provide your own backdrop component, it will receive these animated props `animatedIndex` & `animatedPosition` that indicates the position and the index of the sheet.

You can extend your custom backdrop props interface with the provided `BottomSheetBackdropProps` interface to expose `animatedIndex` & `animatedPosition` into your own interface.

### Example

import useBaseUrl from "@docusaurus/useBaseUrl";
import Video from "@theme/Video";

<Video
  title="React Native Bottom Sheet Custom Backdrop"
  url={useBaseUrl("video/bottom-sheet-custom-backdrop-preview.mp4")}
/>

Here is an example of a custom backdrop component:

```tsx
import React, { useMemo } from "react";
import { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
} from "react-native-reanimated";

const CustomBackdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
  // animated variables
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [0, 1],
      [0, 1],
      Extrapolate.CLAMP
    ),
  }));

  // styles
  const containerStyle = useMemo(
    () => [
      style,
      {
        backgroundColor: "#a8b5eb",
      },
      containerAnimatedStyle,
    ],
    [style, containerAnimatedStyle]
  );

  return <Animated.View style={containerStyle} />;
};

export default CustomBackdrop;
```
